{% extends "GitonomyWebsiteBundle::layout.html.twig" %}

{% trans_default_domain 'user_show' %}

{% block title 'page.title'|trans({'%fullname%': user.fullname}) %}

{% block content %}
    <h1>
        <img src="" />
        {{ 'title.main'|trans({'%fullname%': user.fullname}) }}
    </h1>

    <div id="content">

        <div class="row show-grid">
            <div class="span9">
                <legend>{{ 'title.newsfeed'|trans }}</legend>
                {{ include('GitonomyWebsiteBundle::pagination.html.twig', {pager: newsfeed, page: app.request.query.get('page', 1)}) }}
                <div class="newsfeed">
                    {% for message in newsfeed %}
                        {% set template = "GitonomyWebsiteBundle:Message:"~message.name~".html.twig" %}
                        {% include template with {message: message} %}
                    {% endfor %}
                </div>
                {{ include('GitonomyWebsiteBundle::pagination.html.twig', {pager: newsfeed, page: app.request.query.get('page', 1)}) }}
            </div>

            <div class="span3">
                <legend>{{ 'title.projects'|trans }}</legend>
                <table class="table" id="projects">
                    <thead>
                        <tr>
                            <th>{{ 'table.column.project'|trans }}</th>
                            <th>{{ 'table.column.role'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in projects %}
                            <tr>
                                <td><a href="{{ path('project_newsfeed', {slug: project.slug}) }}">{{ project.name }}</a></td>
                                <td>{{ project.getUserRole(user).role.name }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
{% endblock %}

{% block javascript_content %}
    <script type="text/javascript">
        $(function(){
            var newsfeed   = $(".newsfeed");
            var width     = newsfeed.width();
            var key       = newsfeed.find(".news").eq(0);
            var cardWidth = key.outerWidth(true);
            var newWidth  = Math.floor(width / cardWidth) * cardWidth;

          $('.newsfeed').masonry({
            itemSelector : '.news',
            columnWidth : cardWidth
          });
        });
    </script>
{% endblock %}
